<template>
    <view>
        <view class="section_cycle">
            <block v-for="(item, index) in servicealls" :key="index">
                <view :data-item="item.id" :class="item.checked == true ? 'section_cycle_checked' : 'section_cycle_nochecked'" @tap="onWorkTap">{{ item.name }}</view>
            </block>
        </view>

        <view class="addbtn" @tap="onAdd">保存</view>
    </view>
</template>

<script>
//获取应用实例
var app = getApp();

const _request = require('../../../utils/request.js'); // 引入require;

export default {
    data() {
        return {
            workday: '',
            servicealls: [],
            services: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.onLoadClone3389(options);
    },
    methods: {
        /**
         * 生命周期函数--监听页面加载
         */
        onLoadClone3389: function (options) {
            // 获取用户个人信息
            _request
                .get('/storeCenterInfo/getStoreCenterInfo', {
                    id: uni.getStorageSync('userid')
                })
                .then((res) => {
                    var services = res.data.data.services.map((v) => v['id']);

                    _request
                        .postObj('/category/getAll', {})
                        .then((res) => {
                            var servicealls = res.data.data;

                            for (let i = 0; i < servicealls.length; i++) {
                                if (services.indexOf(servicealls[i]['id']) != -1) {
                                    servicealls[i]['checked'] = true;
                                }
                            }

                            this.setData({
                                servicealls: servicealls
                            });
                        })
                        .catch((error) => {
                            console.log(error, 'error');
                        });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        onWorkTap: function (e) {
            let id = e.currentTarget.dataset.item;
            let servicealls = this.servicealls;

            for (let j = 0; j < servicealls.length; j++) {
                if (id == servicealls[j]['id']) {
                    if (servicealls[j]['checked']) {
                        servicealls[j]['checked'] = false;
                    } else {
                        servicealls[j]['checked'] = true;
                    }
                }
            }

            this.setData({
                servicealls: servicealls
            });
            this.dataChange();
        },

        onAdd: function (e) {
            let services = [];
            let servicealls = this.servicealls;

            for (let j = 0; j < servicealls.length; j++) {
                if (servicealls[j]['checked']) {
                    services.push(servicealls[j]['id']);
                }
            }

            if (services.length == 0) {
                uni.showToast({
                    title: '请至少选择一种服务类型',
                    icon: 'none',
                    duration: 2000
                });
                return;
            }

            _request
                .postObj('/storeCenterInfo/updateServices', {
                    storeId: uni.getStorageSync('storeId'),
                    services: services
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        uni.disableAlertBeforeUnload();
                        uni.showToast({
                            title: '修改成功',
                            icon: 'success',
                            duration: 2000
                        });
                        let pages = getCurrentPages();
                        let prevPage = pages[pages.length - 2];
                        prevPage.onLoad();
                        uni.navigateBack({
                            delta: 0
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none',
                            duration: 2000
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        dataChange() {
            uni.enableAlertBeforeUnload({
                message: '内容未保存, 请确认是否返回?'
            });
        }
    }
};
</script>
<style>
.section_cycle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 20rpx;
}

.section_cycle_nochecked {
    display: flex;
    flex-direction: row;
    /* width: 220rpx;
  height: 80rpx; */
    font-size: 28rpx;
    color: #999999;
    border: 1px #ccc solid;
    border-radius: 8rpx;
    margin: 9rpx;
    justify-content: center;
    align-items: center;
    padding: 10rpx 20rpx;
}

.section_cycle_checked {
    display: flex;
    flex-direction: row;
    /* width: 220rpx; */
    /* height: 80rpx; */
    font-size: 28rpx;
    color: #ffffff;
    border-radius: 8rpx;
    margin: 10rpx;
    justify-content: center;
    align-items: center;
    background-color: #ff8722;
    padding: 10rpx 20rpx;
}

.addbtn {
    width: 690rpx;
    height: 90rpx;
    background: #ff8722;
    border-radius: 45rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #f3f3f3;
    line-height: 90rpx;
    text-align: center;
    margin: 300rpx 30rpx 0 30rpx;
    position: absolute;
    bottom: 50rpx;
}

page {
    background-color: #fbfbfb;
}
</style>
